<template>
  <a-date-picker
    :disabled="disabled || readOnly"
    :placeholder="placeholder"
    :value="momVal"
    :showTime="showTime"
    :format="dateFormat"
    :getCalendarContainer="getCalendarContainer"
    @change="handleDateChange"
  />
</template>

<script>
import moment from 'moment';
export default {
    name: 'GDate',
    props: {
        placeholder: {
            type: String,
            default: '',
            required: false,
        },
        value: {
            type: String,
            required: false,
        },
        dateFormat: {
            type: String,
            default: 'YYYY-MM-DD',
            required: false,
        },
        readOnly: {
            type: Boolean,
            required: false,
            default: false,
        },
        disabled: {
            type: Boolean,
            required: false,
            default: false,
        },
        showTime: {
            type: Boolean,
            required: false,
            default: false,
        },
        getCalendarContainer: {
            type: Function,
            default: node => node.parentNode,
        },
    },
    //在组件内定义 指定父组件调用时候的传值属性和事件类型
    model: {
        prop: 'value',
        event: 'change',
    },
    data() {
        let dateStr = this.value;
        return {
            decorator: '',
            momVal: !dateStr ? null : moment(dateStr, this.dateFormat),
        };
    },
    watch: {
        value(val) {
            if (!val) {
                this.momVal = null;
            } else {
                this.momVal = moment(val, this.dateFormat);
            }
        },
    },
    methods: {
        moment,
        handleDateChange(mom, dateStr) {
            this.$emit('change', dateStr);
        },
    },
};
</script>


<style lang="less" scoped>
</style>">